<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>销售排行</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script src="loginSpecial/js/jquery-2.1.1.min.js"></script>

  	<script type="text/javascript" src="web/js/echarts.common.min.js"></script>

  </head>
  
  <body>
    <div style="margin-top: 5%; text-align: center;">
    	<div id="number" style="height: 400px;width: 80%;display: inline-block;"></div>
		<div id="price" style="height: 400px;width: 80%;display: inline-block;"></div>
    </div>
  </body>
  <script>
  $(function(){
  	var partName1=[];
  	var partName2=[];
  	var amount=[];
  	var price=[];
  	
  	$.ajax({
  		url:"/kxmanage/statistics/sellorNumber_Price",
  		type:"post",
  		dataType:"json",
  		success:function(data){
  			if(data!=null){
  			partName1=data.partname1;
  			partName2=data.partname2;
  			amount=data.amount;
  			price=data.price;
  				var myChart1 = echarts.init(document.getElementById('number'));
			    var myChart2 = echarts.init(document.getElementById('price'));
			    
			    var option1={
			    	title: {
				        text: '销售数量排行图'
				    },
				    tooltip: {
					trigger: 'axis',
					 axisPointer: {
					 	type: 'cross',
					 	crossStyle: {
							color: '#999'
					 	}
					 }
				   },
				   legend: {
					data:['销售数量']
				   },
				   yAxis: {
				     data: partName1
				   },
				    grid:{
				    x:200,
				   }, 
				   xAxis: [
					 {
						type: 'value',
						name: '数量',
						min: 0,
						axisLabel: {
						   formatter: '{value}'
						}
					 }
				   ],
				    series: [{
				      name: '销售数量',
				      backgroundColor:'#289731',
				      type: 'bar',
				      data: amount
				    }]
			    }
			    
			    var option2={
			    title: {
				        text: '销售金额排行图'
				    },
				    tooltip: {
					trigger: 'axis',
					 axisPointer: {
					 	type: 'cross',
					 	crossStyle: {
							color: '#999'
					 	}
					 }
				   },
				   legend: {
					data:['销售金额']
				   },
				   yAxis: {
				     data: partName2
				   },
				    grid:{
				    x:200,
				   }, 
				   xAxis: [
					 {
						type: 'value',
						name: '金额',
						min: 0,
						axisLabel: {
						   formatter: '{value} ￥'
						}
					 }
				   ],
				    series: [{
				      name: '销售金额',
				      backgroundColor:'#8EC9EB',
				      type: 'bar',
				      data: price
				    }]
			    }
			    
			     myChart1.setOption(option1);
				 myChart2.setOption(option2);
  			}
  		}
  	});
  });
  </script>
</html>
